<template>
	 <!-- 最外层的大盒子 -->
	 <view style="height: 50px;"></view>
	        <!-- 滑动盒子 -->
	        <!-- 注册盒子 -->
	        <view class="register-form">
	            <!-- 标题盒子 -->
	            <view class="title-box">
	                <h3>忘记密码</h3>
	            </view>
	            <!-- 输入框盒子 -->
	            <view class="input-box">
	                <input type="text" placeholder="手机号" v-model="registerData.phone">
					<view style="width: 70%;">
						<input type="text" class="input_input" placeholder="验证码" v-model="registerData.captcha">
						<button class="input_button" @click="sendKey" type="button">send</button>
					</view>
<!-- 	               <view class="password-box">
					   <i class="icon-search"></i> -->
					   <input type="password" placeholder="新密码" v-model="registerData.password" @confirm="register">
				   <!-- </view> -->
	                
	            </view>
	        </view>
</template>
<script setup>
import {ref} from 'vue'
import {useTokenStore} from '../stores/token.js'
const tokenStore = useTokenStore()
import {sendKeyService} from '../api/captcha.js'
import {userLoginService,userRegisterService,userForgetService} from '../api/user.js'
let LoginOrRegister = ref("没有账号?去注册");
let flag=true;
const registerData = ref({
    phone: '',
	captcha:'',
    password: ''
})
const loginData = ref({
	phone:'',
	password:''
})
const mySwitch=()=>{
	const preBox = document.querySelector('.pre-box');
	const img = document.querySelector('img');
	const login = document.querySelector('.login-form');
	if (flag) {
		preBox.style.transform = "translateX(233.4%)";
		preBox.style.backgroundColor = "#c9e0ed";
		img.setAttribute("src", "/static/img/wuwu.jpeg");
		LoginOrRegister.value="已有账号?去登录"
		setTimeout(function(){
			login.style.display="none";
		},210)
		
		
	} else {
		preBox.style.transform = "translateX(0%)";
		preBox.style.backgroundColor = "#edd4dc";
		img.setAttribute("src", "/static/img/waoku.jpg");
		LoginOrRegister.value="没有账号?去注册"
		setTimeout(function(){
			login.style.display="";
		},260)
	}
	flag = !flag;
}
const login = async ()=>{
	let result = await userLoginService(loginData.value)
	console.log(result.data)
	tokenStore.setToken(result.data.token)
	console.log(tokenStore.token)
	uni.redirectTo({
		url:'/pages/index/index'
	})
}

const sendKey = async ()=>{
	console.log(registerData.value.phone)
	let result = await sendKeyService(registerData.value.phone);
	console.log(result);
}
const register = async () => {
	console.log("开始注册")
    let result = await userForgetService(registerData.value);
	console.log(result);
    alert(result.msg ? result.msg : '更改成功')
	uni.navigateTo({
		url:"/pages/views/login"
	})
}
const goToTargetPage = (url) => {
	uni.navigateTo({
		url:url
	})
}	
</script>

<style scoped>

	* {
	    /* 去除浏览器默认内外边距 */
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
		align-items: center;
	}
	                                                                                         
	/* 去除input的轮廓 */
	input {
	    outline: none;
	}
	
	html,
	body {
	    height: 100%;
	}
	
	body {
	    /* 溢出隐藏 */
	    overflow-x: hidden;
	    /* display: flex; */
	    /* 渐变方向从左到右 */
	    background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
	}
	
	span {
	    position: absolute;
	    z-index: 0;
	    bottom: 0;
	    border-radius: 50%;
	    /* 径向渐变 */
	    background: radial-gradient(circle at 72% 28%, #fff 3px, #ff7edf 8%, #5b5b5b, #aad7f9 100%);
	    /* 泡泡内阴影 */
	    box-shadow: inset 0 0 6px #fff,
	        inset 3px 0 6px #eaf5fc,
	        inset 2px -2px 10px #efcde6,
	        inset 0 0 60px #f9f6de,
	        0 0 20px #fff;
	    /* 动画 */
	    animation: myMove 4s linear infinite;
	}
	
	

	
	/* 最外层的大盒子 */
	.box {
	    width: 700rpx;
	    height: 430rpx;
	    display: flex;
	    /* 相对定位 */
	    position: relative;
	    margin: auto;
		/* margin-top: 10px; */
	    /* 设置圆角 */
	    border-radius: 8px;
	    /* 设置边框 */
	    border: 1px solid rgba(255, 255, 255, .6);
	    /* 设置盒子阴影 */
	    box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
	}
	
	/* 滑动的盒子 */
	.pre-box {
	    /* 宽度为大盒子的一半 */
	    width: 30%;
	    /* width: var(--width); */
	    height: 100%;
	    /* 绝对定位 */
	    position: absolute;
	    /* 距离大盒子左侧为0 */
	    left: 0;
	    /* 距离大盒子顶部为0 */
	    top: 0;
	    z-index: 99;
	    border-radius: 4px;
	    background-color: #edd4dc;
	    box-shadow: 4rpx 2rpx 40rpx rgba(0, 0, 0, .1);
	    /* 动画过渡，先加速再减速 */
	    transition: 0.5s ease-in-out;
	}
	
	/* 滑动盒子的标题 */
	.pre-box h3 {
	    margin-top: 40rpx;
		font-size: 32rpx;
	    text-align: center;
	    /* 文字间距 */
	    letter-spacing: 5rpx;
	    color: white;
	    /* 禁止选中 */
	    user-select: none;
	    /* 文字阴影 */
	    text-shadow: 8rpx 8rpx 6rpx rgba(0, 0, 0, .1);
	}
	
	/* 滑动盒子的文字 */
	.pre-box p {
	    height: 60rpx;
	    line-height: 60rpx;
	    text-align: center;
	    margin: 40rpx 0;
	    /* 禁止选中 */
	    user-select: none;
	    font-weight: bold;
	    color: white;
	    text-shadow: 8rpx 8rpx 6rpx rgba(0, 0, 0, .1);
	}
	
	/* 图片盒子 */
	.img-box {
	    width: 150rpx;
	    height: 150rpx;
	    margin: 40rpx auto;
	    /* 设置为圆形 */
	    border-radius: 50%;
	    /* 设置用户禁止选中 */
	    user-select: none;
	    overflow: hidden;
	    box-shadow: 8rpx 8rpx 6rpx rgba(0, 0, 0, .1);
	}
	
	/* 图片 */
	.img-box img {
	    width: 100%;
	    transition: 0.5s;
	}
	
	/* 登录和注册盒子 */
		
	.login-form {
		width: 520rpx;
		position: absolute;
		height: 100%;
		right: 0rpx;
		background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
	}
	.register-form {
	    /* flex: 3; */
		position: absolute;
		 background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
		left: 0;
		margin-left: 100rpx;
		width: 520rpx;
	    height: 100%;
	}
	/* 忘记密码 */
	.forget-box {
		display: flex;
		/* justify-content: end; */
		margin-top: 32rpx;
		margin-left: 300rpx;
	}
	/* 标题盒子 */
	.title-box {
	    height: 80rpx;
	    line-height: 60rpx;
		align-items: center;
	
	}
	
	/* 标题 */
	.title-box h3 {
	    text-align: center;
	    color: white;
	    /* 禁止选中 */
	    user-select: none;
	    letter-spacing: 10rpx;
	    text-shadow: 8rpx 8rpx 6rpx rgba(0, 0, 0, .1);
	
	}
	
	/* 输入框盒子 */
	.input-box {
	    display: flex;
	    /* 纵向布局 */
	    flex-direction: column;
	    /* 水平居中 */
	    align-items: center;
		/* margin-left: 80rpx; */
	}
	
/* 	.password-box {
		width: 100%;
		position: relative;
		align-items: center;
		
	} */
/* 	.icon-search {
		background: url(/static/logo.png) no-repeat;
		width: 20px;
		height: 20px;
		position: absolute;
		left: 150rpx;
		z-index: 1;
	} */
	.input_input {
		width: 71%;
		display: inline-block;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		border-right-style: none;
	}
	.input_button{
		/* all: unset; */
		display: inline-block;
		outline: none;
		width: 29%;
		height: 68rpx;
		line-height: 100%;
		vertical-align: top;
		padding-top: 18rpx;
		/* padding-left: 8rpx; */
		font-size: 24rpx;
		background-color: #00000000;
		color: #fff;
		box-sizing: border-box;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		border-radius: 0 100rpx 100rpx 0;

	}
	uni-button::after{
		content: none;
	}
	
	/* 输入框 */
	input {
		/* margin-left: 20rpx; */
		align-items: center;
		font-size: 24rpx;
	    width: 70%;
	    height: 68rpx;
	    margin-bottom: 40rpx;
	    text-indent: 10px;
	    border: 1px solid #fff;
	    background-color: rgba(250, 250, 250, 0.3);
	    border-radius: 240rpx;
	    /* 增加磨砂质感 */
	    backdrop-filter: blur(20rpx);
	}
	
	input:focus {
	    /* 光标颜色 */
	    color: #b0cfe9;
	
	}
	
	/* 聚焦时隐藏文字 */
	input:focus::placeholder {
	    opacity: 0;
	}
	
	/* 按钮盒子 */
	.btn-box {
	    /* display: flex; */
		margin-top: 20rpx;
		/* margin-left: 52rpx; */
	    /* justify-content: end; */
	}
	
	/* 按钮 */
/* 	button {
	    width: 150rpx;
	    height: 60rpx;
	    margin: 0 28rpx;
	    line-height: 60rpx;
	    border: none;
	    border-radius: 8rpx;
	    background-color: #69b3f0;
	    color: white;
	}
	 */
	/* 按钮悬停时 */
	button:hover {
	    /* 鼠标小手 */
	    cursor: pointer;
	    /* 透明度 */
	    opacity: .8;
	}
	
	/* 按钮文字 */
	.forget-box p {
	    height: 60rpx;
	    line-height: 60rpx;
	    /* 禁止选中 */
	    user-select: none;
	    font-size: 28rpx;
	    color: white;
	
	}
	
	.forget-box p:hover {
	    /* cursor: pointer; */
	    /* border-bottom: 2rpx solid white; */
		opacity: .7;
	}
	
	.btn-box p{
		/* display: flex; */
		/* justify-content: right; */
		float: right;
		color: white;
		margin-top: 20rpx;
		font-size: 30rpx;
		margin-right: 20rpx;
	}
	.btn-box p:hover {
		/* border-bottom: 2rpx solid white; */
		opacity: .7;
	}
</style>
